<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
     #box{
	    width:200px;
		height:100px;
		background-color:red;
	 }
  </style>
  <script src="jQuery复习/jquery-3.3.1.js"></script>
 </head>
 <body>
    <button id="btn_start">开始动画</button>
	<button id="btn_finish">结束动画</button>
	<button id="btn_stop">停止动画</button>
    <div id="box"></div>
 </body>
 <script>
   $("#btn_start").on("click",function(){
      $("#box").hide(1000).show(1000).slideUp(1000).slideDown(1000)
			   .animate({
	               width:"300px",
		           height:"200px"
	           },1000);
   });
   $("#btn_finish").on("click",function(){
       //立即结束动画，让dom元素变化到最终队列都结束的效果状态
	   $("#box").finish();
   });
   $("#btn_stop").on("click",function(){
	   //stop方法传入一个参数false或不传参数，表示结束当前的动画，
	   //后面的动画不受影响

	   //如果传入第一个参数为true,后面的动画也受影响，不执行了
       $("#box").stop(true);
   });
 </script>
</html>
